<script setup lang="ts">
import { ref } from 'vue'

// 当前显示的内容索引
const currentContent = ref(0)

// 内容数组
const contents = [
  {
    id: 'no1',
    content: `
    <p style="text-align: center; font-family: '华文行楷', cursive; font-size: 3em">
              星星之火，可以燎原。
            </p>
            <p style="text-indent: 2em">
              在历史的长河中，大革命时期犹如一座巍峨的丰碑，铭刻着中国共产党为民族解放事业而英勇奋斗的壮丽篇章，那是一段激情澎湃、热血燃烧的岁月，承载着无数革命先辈的理想与信念。
            </p>
            <p style="text-indent: 2em">
              1924 年，广州成为了希望之光汇聚的地方。国民党第一次全国代表大会在此召开，联俄、联共、扶助农工三大革命政策的确立，如同三把火炬，照亮了前行的道路，第一次国共合作就此正式拉开帷幕。这一合作，宛如两条奔腾的河流汇聚成一股不可阻挡的洪流，国民革命思想如春风吹过大地，迅速广泛地传播开来。在这股思潮的推动下，反对帝国主义和封建军阀的革命新局面如同朝阳破晓般展现在世人面前。从此，革命的火种在中华大地各处被点燃，无数有志之士纷纷投身其中，为了国家的独立和民族的尊严而战。
            </p>
            <p style="text-indent: 2em">
              时间来到 1925 年，上海的上空笼罩着悲愤的阴霾。日本帝国主义的恶行，残忍杀害工人顾正红，这一血腥事件如同导火索，迅速引爆了五卅惨案。这一惨案，是帝国主义对中国人民的又一次残酷践踏，但它没有让中国人民屈服，反而激起了全国人民心中熊熊燃烧的怒火。工人罢工、学生罢课、商人罢市，如同一首气势磅礴的交响曲，奏响了全国反帝运动的高潮。大街小巷，人们义愤填膺，高呼着反帝的口号，他们的眼神中燃烧着对侵略者的仇恨和对正义的渴望。在这一时期，中国人民用行动向世界宣告，他们绝不允许自己的国家被肆意欺凌，民族的尊严不容侵犯。
            </p>
            <p style="text-indent: 2em">
              1926 年，国民革命军北伐的号角吹响，那是向北洋军阀发起的正义冲锋。北伐军一路势如破竹，如同一把利剑直插敌人的心脏，沉重地打击了北洋军阀的反动势力。在北伐的战场上，有这样一支特殊的力量 —— 中国共产党独立武装。他们以无畏的勇气和顽强的斗志，在战斗中表现得异常勇猛。尤其是在他们的奋战下，所在的 “第四军” 赢得了 “铁军” 的光荣称号。他们冲锋陷阵的身影，成为了那个战火纷飞年代里最令人敬仰的画面。每一次战斗，都是对信念的坚守；每一次冲锋，都是对民族解放的追求。他们用鲜血和生命，书写着革命的壮丽史诗，为北伐战争的胜利立下了不朽的功勋。
            </p>
            <p style="text-indent: 2em">
              然而，反革命的阴霾却在 1927 年如乌云般压来。蒋介石、汪精卫之流，在权力和利益的诱惑下，背叛了革命，他们露出了狰狞的面目，相继发动反革命政变。一时间，腥风血雨笼罩大地，无数的共产党人和革命群众被捕、被杀，曾经充满希望的革命形势急转直下。第一次国共合作就这样在敌人的屠刀下破裂，大革命也宣告失败。这是一段黑暗的时光，无数的家庭因此破碎，无数的生命因此消逝，但革命的火焰并未就此熄灭。
            </p>
            <p style="text-indent: 2em">
              大革命虽然失败了，但它留下的历史意义却如同一座永不磨灭的灯塔。它教育和锻炼了各个革命阶级，让人们深刻认识到革命道路的艰难与曲折。它为后来党领导的土地革命战争奠定了坚实的群众基础，让广大人民群众更加清楚地认识到只有通过不懈的斗争，才能赢得民族的独立和解放。同时，这次大革命也让中国共产党人更加深刻地认识到土地革命和掌握革命武装的重要性。在大革命的洗礼中，党的组织得到了迅速发展，如同在暴风雨中茁壮成长的树苗，为后续党领导的土地革命战争准备了不可或缺的条件。这一时期的历史，是中华民族伟大复兴征程中一部悲壮而又充满力量的乐章，激励着无数中华儿女为了国家和民族的未来奋勇向前。
            </p>
            
    `
  },
  {
    id: 'no2',
    content: `
    <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">星星之火，可以燎原</span>
              ——毛泽东
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">为人民服务</span>
              ——毛泽东
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">枪杆子里面出政权</span>
              ——毛泽东
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">一切反动派都是纸老虎</span>
              ——毛泽东
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">为中华之崛起而读书</span>
              ——周恩来
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">为中华之崛起而读书</span>
              ——周恩来
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">革命尚未成功，同志仍需努力</span>
              ——孙中山
            </p>
            <p style="text-indent: 2em">
              <span style="font-family: 'KaiTi';font-size: 1.5em">革命者要像松树一样，风吹不倒，雪压不弯</span>
              ——朱德
            </p>
      
    `
  }
]

// 下一次要切换到的索引值
const nextIndex = ref(1)

// 切换内容的方法
function toggleContent() {
  currentContent.value = nextIndex.value
  // 更新nextIndex的值，实现来回切换
  if (nextIndex.value === 1) {
    nextIndex.value = 0
  } else {
    nextIndex.value = 1
  }
}
</script>
<template>
  <!--文字介绍-->
  <!--文字介绍-->
  <div class="my-container">
    <div class="my-area my-row">
      <div class="my-col-md-12">
        <div class="sub_cont" style="background-color: white; opacity: 0.8">
          <h1 @click="toggleContent">大革命</h1>
          <hr />
          <!-- 使用 v-html 显示内容 -->
          <div v-html="contents[currentContent].content" :id="contents[currentContent].id"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>
<style scoped>
.sub_cont {
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  margin: 30px 50px;
  box-sizing: border-box;
  padding: 15px 30px;
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
}

.sub_cont h1 {
  text-align: center;
  font-weight: bold;
}

.sub_cont h1:hover {
  cursor: pointer;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  /* 悬浮时的阴影设置 */
  transform: translateY(-3px);
  /* 鼠标悬浮时向上移动 */
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
}

.sub_cont p {
  font-size: 1.2em;
  font-weight: bold;
}

/* .sub_cont:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  悬浮时的阴影设置
  transform: translateY(-10px);
  鼠标悬浮时向上移动
} */
</style>
